<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<div id="app">
    <h2>{{title}}</h2>

    <div class="input-group">
        <input v-model="newItem" @keyup.enter="addItem"
               placeholder="add items here" type="text" class="form-control">
        <span class="inpuy-group-btn">
            <button @click="addItem" class="btn btn-default" type="button">ADD!</button>
        </span>
    </div>

    <ul>
        <li v-for="item in items" v-bind:class="{'removed':item.checked}">
            <div class="checkbox">
                <label>
                    <input type="checkbox" v-model="item.checked"/>
                    {{item.text}}
                </label>
            </div>
        </li>

    </ul>
    <!--<div class="footer">-->
        <!--<hr/>-->
        <!--<em>Change the title of your shopping list</em>-->
        <!--<input v-model="title"/>-->
    <!--</div>-->
</div>
<script>
    var data = {
        items:[{text:'Banana',checked:true},
            {text:'Apple',checked:false}],
        title:'My Shopping List',
        newItem:''
    };

    new Vue ({
        el:'#app',
        data:data,
        methods:{
            addItem:function () {
                var text;
                text = this.newItem.trim();
                if (text) {
                    this.items.push({text:text,checked:false});
                    this.newItem="";
                }
            }
        }
    });
</script>
</body>
</html>